<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Ngẩu nhiên và tất nhiên</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Website Vertical Scrolling with jQuery" />
        <meta name="keywords" content="jquery, vertical, scrolling, scroll, smooth"/>
        <link rel="stylesheet" href="css/style_vertical.css" type="text/css" media="screen"/>
    </head>
    <style>
        a{
            color:#fff;
            text-decoration:none;
        }
        a:hover{
            text-decoration:underline;
        }
        span.reference{
            position:fixed;
            left:10px;
            bottom:10px;
            font-size:13px;
            font-weight:bold;
        }
        span.reference a{
            color:#fff;
            text-shadow:1px 1px 1px #000;
            padding-right:20px;
        }
        span.reference a:hover{
            color:#ddd;
            text-decoration:none;
        }

    </style>
    <body>
        <div>
            <span class="reference">
                <a href="http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/">© Codrops</a>
                <a href="index.html">Horizontal Demo</a>
            </span>
        </div>

        <div class="section black" id="section1">
            <h3>Trang 1</h3>
			<img src="http://farm9.staticflickr.com/8051/8114773400_5bb9210c3f_b.jpg" />
            <ul class="nav">
                <li>1</li>
                <li><a href="#section2">2</a></li>
				<li><a href="#section3">3</a></li>
				<li><a href="#section4">4</a></li>
				<li><a href="#section5">5</a></li>
				<li><a href="#section6">6</a></li>
				<li><a href="#section7">7</a></li>
				<li><a href="#section8">8</a></li>
            </ul>
        </div>
        <div class="section white" id="section2">
			<h3>Trang 2</h3>
            <p>
                <!--MY Spectre around me night and day
                Like a wild beast guards my way;
                My Emanation far within
                Weeps incessantly for my sin.
				-->
            </p>
            <img src="http://farm9.staticflickr.com/8183/8114769828_d6cc7df461_b.jpg"  /><br />
            <ul class="nav">
                <li><a href="#section1">1</a></li>
				<li>2</li>
				<li><a href="#section3">3</a></li>
				<li><a href="#section4">4</a></li>
				<li><a href="#section5">5</a></li>
				<li><a href="#section6">6</a></li>
				<li><a href="#section7">7</a></li>
				<li><a href="#section8">8</a></li>
            </ul>
        </div>
        <div class="section black" id="section3">
            <h3>Trang 3</h3>
			<img src="http://farm9.staticflickr.com/8189/8114756639_e7a9255824_b.jpg"  /><br />
			
            <ul class="nav">
                <li><a href="#section1">1</a></li>
				<li><a href="#section2">2</a></li>
				<li>3</li>
				<li><a href="#section4">4</a></li>
				<li><a href="#section5">5</a></li>
				<li><a href="#section6">6</a></li>
				<li><a href="#section7">7</a></li>
				<li><a href="#section8">8</a></li>
            </ul>
        </div>
		 <div class="section black" id="section4">
            <h3>Trang 4</h3>
			<img src="http://farm9.staticflickr.com/8470/8114761074_3965fe8d83_b.jpg"  /><br />
            <ul class="nav">
                <li><a href="#section1">1</a></li>
				<li><a href="#section2">2</a></li>
				<li><a href="#section3">3</a></li>
				<li>4</li>
				<li><a href="#section5">5</a></li>
				<li><a href="#section6">6</a></li>
				<li><a href="#section7">7</a></li>
				<li><a href="#section8">8</a></li>
            </ul>
        </div>
		 <div class="section black" id="section5">
            <h3>Trang 5</h3>
			<img src="http://farm9.staticflickr.com/8465/8114777280_76c0f336fe_b.jpg"  /><br />
			
            <ul class="nav">
                <li><a href="#section1">1</a></li>
				<li><a href="#section2">2</a></li>
				<li><a href="#section3">3</a></li>
				<li><a href="#section4">4</a></li>
				<li>5</li>
				<li><a href="#section6">6</a></li>
				<li><a href="#section7">7</a></li>
				<li><a href="#section8">8</a></li>
            </ul>
        </div>
		 <div class="section black" id="section6">
            <h3>Trang 6</h3>
			<img src="http://farm9.staticflickr.com/8327/8114788093_2f50219112_b.jpg"  /><br />
			
            <ul class="nav">
                 <li><a href="#section1">1</a></li>
				<li><a href="#section2">2</a></li>
				<li><a href="#section3">3</a></li>
				<li><a href="#section4">4</a></li>
				<li><a href="#section5">5</a></li>
				<li>6</li>
				<li><a href="#section7">7</a></li>
				<li><a href="#section8">8</a></li>
            </ul>
        </div>
        <!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>		
        <script type="text/javascript" src="jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
                $('ul.nav a').bind('click',function(event){
                    var $anchor = $(this);
                    
                    $('html, body').stop().animate({
                        scrollTop: $($anchor.attr('href')).offset().top
                    }, 1500,'easeInOutExpo');
                    /*
                    if you don't want to use the easing effects:
                    $('html, body').stop().animate({
                        scrollTop: $($anchor.attr('href')).offset().top
                    }, 1000);
                    */
                    event.preventDefault();
                });
            });
        </script>
    </body>
</html>